<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="favicon.ico" type="image/x-icon"/>
  <link rel="stylesheet" href="examples-styles.css"/>

  <title>abcjs: PDF Maker Demo</title>

  <link rel="stylesheet" type="text/css" href="../abcjs-audio.css">
  <script src="../dist/abcjs-basic.js" type="text/javascript"></script>
  <script type="text/javascript">
    window.onload = function () {
      new ABCJS.Editor("abc", {
        canvas_id: "canvas",
        generate_warnings: true,
        warnings_id: "warnings",
        synth: {
          el: "#audio",
          options: { displayRestart: true, displayPlay: true, displayProgress: true, displayWarp: true }
        },
        abcjsParams: {
          responsive: "resize",
          oneSvgPerLine: true
        }
      });
    };
  </script>
  <style>
    @media print {
      header, footer, nav button, main section {
        display: none;
      }
      main section.output {
        display: block;
      }
        [fill="#ff0000"] {
            fill: currentColor;
        }
    }
  </style>
</head>
<body>
  <header>
    <img src="https://paulrosen.github.io/abcjs/img/abcjs_comp_extended_08.svg" alt="abcjs logo">
    <h1>PDF Maker</h1>
  </header>
  <div class="container">
    <main>
      <section>
        <p>
          This page demonstrates how to take the output of abcjs and make a nicely formatted PDF out of it. It does that by using the browser's built in print capability. The
          browser's "Print Preview" dialog contains an option to "print to PDF".
          (It is useful to use the "oneSvgPerLine" option when printing. This will keep the browser from breaking the music in the middle of a staff when there is a page break.)
        </p>
        <ul class="instructions">
          <li>
            Use the input dialog below to create the music you wish to print.</li>
          <li>
            Use the music player to test your input for typos.</li>
          <li>
            Click the "print" button to save as PDF.</li>
        </ul>
      </section>
      <section class="input">
        <textarea id="abc" spellcheck="false">
X: 1
T: Cooley's
M: 4/4
L: 1/8
R: reel
K: Emin
|:D2|EB{c}BA B2 EB|~B2 AB dBAG|FDAD BDAD|FDAD dAFD|
EBBA B2 EB|B2 AB defg|afe^c dBAF|DEFD E2:|
|:gf|eB B2 efge|eB B2 gedB|A2 FA DAFA|A2 FA defg|
eB B2 eBgB|eB B2 defg|afe^c dBAF|DEFD E2:|
|:D2|EB{c}BA B2 EB|~B2 AB dBAG|FDAD BDAD|FDAD dAFD|
EBBA B2 EB|B2 AB defg|afe^c dBAF|DEFD E2:|
|:gf|eB B2 efge|eB B2 gedB|A2 FA DAFA|A2 FA defg|
eB B2 eBgB|eB B2 defg|afe^c dBAF|DEFD E2:|
|:D2|EB{c}BA B2 EB|~B2 AB dBAG|FDAD BDAD|FDAD dAFD|
EBBA B2 EB|B2 AB defg|afe^c dBAF|DEFD E2:|
|:gf|eB B2 efge|eB B2 gedB|A2 FA DAFA|A2 FA defg|
eB B2 eBgB|eB B2 defg|afe^c dBAF|DEFD E2:|
|:D2|EB{c}BA B2 EB|~B2 AB dBAG|FDAD BDAD|FDAD dAFD|
EBBA B2 EB|B2 AB defg|afe^c dBAF|DEFD E2:|
|:gf|eB B2 efge|eB B2 gedB|A2 FA DAFA|A2 FA defg|
eB B2 eBgB|eB B2 defg|afe^c dBAF|DEFD E2:|
        </textarea>

        <div id="warnings"></div>
        <div id="audio"></div>
      </section>
      <section class="output">
        <nav>
          <button onclick="window.print()">Print</button>
        </nav>
        <div id="canvas" class="visible-background"></div>
      </section>
    </main>
  </div>
</body>
</html>
